<nz-card>
  <div class="searchItem">
    <span class="label">商品标题</span>
    <input nz-input placeholder="请输入商品标题" [(ngModel)]="query.title"/>
  </div>
  <div class="searchItem">
    <span class="label">状态</span>
    <nz-select [(ngModel)]="query.status" nzPlaceHolder="请选择" [nzBackdrop]="true" nzAllowClear>
      <nz-option [nzValue]="0" nzLabel="上架中"></nz-option>
      <nz-option [nzValue]="1" nzLabel="已下架"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <span class="label">更新时间</span>
    <nz-range-picker id="date" nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
  <div class="operationRow">
    <button nz-button nzType="primary" (click)="toEditCommodity()">新增商品</button>
    <button nz-button nzType="primary" (click)="batchOption('up')">批量上架</button>
    <button nz-button nzType="primary" nzDanger (click)="batchOption('down')">批量下架</button>
  </div>
</nz-card>

<nz-card>

  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzTableLayout="fixed"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
    <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)" nzLeft></th>
      <th nzAlign="center">ID</th>
      <th nzAlign="center">商品标题</th>
      <th nzAlign="center">日租金范围（元）</th>
      <th nzAlign="center">租期范围</th>
      <th nzAlign="center">押金范围（元）</th>
      <th nzAlign="center">买断价格（元）</th>
      <th nzAlign="center">总库存</th>
      <th nzAlign="center">状态</th>
      <th nzAlign="center">更新时间</th>
      <th nzAlign="center" nzWidth="250px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td
      [nzChecked]="setOfCheckedId.has(data['id'])"
      [nzDisabled]="data['disabled'] || data['status'] === 4"
      (nzCheckedChange)="onItemChecked(data['id'], $event)" nzLeft
    ></td>
      <td nzAlign="center">{{ data['id'] }}</td>
      <td nzAlign="center">{{ data['title'] }}</td>
      <td nzAlign="center">{{ data['rentRange'] }}</td>
      <td nzAlign="center">{{ data['rentDayRange'] }}</td>
      <td nzAlign="center">{{ data['depositRange'] }}</td>
      <td nzAlign="center">{{ data['buyoutRange'] }}</td>
      <td nzAlign="center">{{ data['totalInventory'] }}</td>
      <td nzAlign="center" [attr.status]="data['status']">{{ data['status'] === 0 ? '上架中' : '已下架' }}</td>
      <td nzAlign="center">{{ data['updateTime']}}</td>
      <!--      <td nzAlign="center">-->
      <!--        <div style="display: flex;flex-direction: row;align-items: center;padding-left: 24px;height: 80px">-->
      <!--          <img-->
      <!--            nz-image-->
      <!--            width="60px"-->
      <!--            height="60px"-->
      <!--            style="margin-right: 8px"-->
      <!--            *ngIf="data['icon']"-->
      <!--            [nzSrc]="data['icon']"-->
      <!--            [alt]="data['goodsName']"-->
      <!--          />-->
      <!--          <span>-->
      <!--          <a style="color: #1890ff" target="_blank">{{data['goodsName']}}</a>-->
      <!--          </span>-->
      <!--        </div>-->
      <!--      </td>-->
      <td nzAlign="center">
        <a routerLink="/hireDevice/hireDeviceCommodityEdit" [queryParams]="{id: data['id'],type: 'view'}">查看</a>
        <a routerLink="/hireDevice/hireDeviceCommodityEdit" [queryParams]="{id: data['id'],type: 'edit'}">编辑</a>
        <a routerLink="/hireDevice/hireDeviceCommodityEdit" [queryParams]="{id: data['id'],type: 'copy'}">复制</a>
<!--        <a>详情</a>-->
        <a style="color: red" nz-popconfirm nzPopconfirmTitle="确认要删除吗?" (nzOnConfirm)="deleteCommodity(data['id'])">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
</nz-card>
